<template>
    <div class="listcontainer">
        <header id="header" class="mui-bar mui-bar-nav">
            <div class="mui-input-row mui-search">
                <input type="search" class="mui-input-clear" placeholder="">
            </div>
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <div class="header-rt">
                <span class="mui-icon mui-icon-more" @click="showToggle"></span>
               <ul v-show="isShow">
                   <li><span class="mui-icon mui-icon-home"></span><a href="#">首页</a></li>
                   <li><span class="mui-icon mui-icon-search"></span><a href="#">分类搜索</a></li>
                   <li><span class="mui-icon-extra mui-icon-extra-cart"></span><a href="#">购物车</a></li>
                   <li><span class="mui-icon mui-icon-contact"></span><a href="#">我的京东</a></li>
                   <li><span class="mui-icon mui-icon-spinner-cycle mui-spin"></span><a href="#">浏览记录</a></li>
               </ul>
            </div>
        </header>
        <div class="container">
            <div id="slider" class="mui-slider mui-fullscreen" style="width: 90px">
                <div  style="width: 90px"id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                    <div class="mui-scroll">
                        <a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
                            精选
                        </a>
                        <a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
                            文娱
                        </a>
                        <a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
                            美妆
                        </a>
                        <a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
                            家装
                        </a>
                        <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
                            家居
                        </a>
                        <a class="mui-control-item" href="#item6mobile" data-wid="tab-top-subpage-6.html">
                            配饰
                        </a>
                        <a class="mui-control-item" href="#item7mobile" data-wid="tab-top-subpage-7.html">
                            数码
                        </a>
                        <a class="mui-control-item" href="#item8mobile" data-wid="tab-top-subpage-8.html">
                            日用
                        </a>
                        <a class="mui-control-item" href="#item9mobile" data-wid="tab-top-subpage-9.html">
                            汽车
                        </a>
                        <a class="mui-control-item" href="#item10mobile" data-wid="tab-top-subpage-10.html">
                            手机
                        </a>
                        <a class="mui-control-item" href="#item11mobile" data-wid="tab-top-subpage-11.html">
                            家居
                        </a>
                        <a class="mui-control-item" href="#item12mobile" data-wid="tab-top-subpage-12.html">
                            内衣
                        </a>
                    </div>
</div>

            </div>
        </div>
        <div class="container-b">
            <div>
                <img src="//img12.360buyimg.com/mcoss/s670x670_jfs/t30718/198/1493505939/29968/b7dbb699/5ce27c1cN8f06aa99.jpg!q70.dpg" alt="">
            </div>
            <div class="lishi">
                <h3>浏览足迹</h3>
                <span style="float: right" class="mui-icon mui-icon-trash">
                    清空
                </span>
                <ul>
                    <li><a href="#"><img src="//img30.360buyimg.com/focus/s140x140_jfs/t1/1446/14/631/8500/5b9237e5E0d1f9e16/b1a627b92323b5ed.png" alt=""></a>
                        <p>华为</p>
                    </li>
                </ul>
            </div>
            <div class="hotshopping">
                <h3>商品类别</h3>
                <ul>
                    <li><a href="#"><img src="//img10.360buyimg.com/img/s140x140_jfs/t27478/237/991327140/17254/8bbb2f05/5bbebd6cN3fb15bff.jpg!q70.dpg.webp" alt="">休闲鞋</a></li>
                    <li><a href="#"><img src="//img10.360buyimg.com/img/s140x140_jfs/t27478/237/991327140/17254/8bbb2f05/5bbebd6cN3fb15bff.jpg!q70.dpg.webp" alt="">休闲鞋</a></li>
                    <li><a href="#"><img src="//img10.360buyimg.com/img/s140x140_jfs/t27478/237/991327140/17254/8bbb2f05/5bbebd6cN3fb15bff.jpg!q70.dpg.webp" alt="">休闲鞋</a></li>
                    <li><a href="#"><img src="//img10.360buyimg.com/img/s140x140_jfs/t27478/237/991327140/17254/8bbb2f05/5bbebd6cN3fb15bff.jpg!q70.dpg.webp" alt="">休闲鞋</a></li>
                </ul>
            </div>
        </div>

    </div>
</template>


<script>
export default {
    data(){

        return {
            btnText:"显示",
            isShow:true

        }
    },created(){

    },methods:{
        showToggle:function(){
            this.isShow = !this.isShow
            if(this.isShow){
                this.btnText = "隐藏"
            }else{
                this.btnText = "显示"
            }
        }

    }
}
</script>

<style lang="scss" scoped>
    * { touch-action: none; }
    .listcontainer {
        background-color: #fff;
        .mui-bar-nav {
            background-color: #fff;
            position: relative;
            .mui-search {
                display: inline-block;
                width: 90%;


                input {
                    background-color: #eeeeee;

                }
            }
            .header-rt {
                position: absolute;
                top: 1px;
                right: 0;


                ul{
                    position: absolute;
                    top: 35px;
                    right: 10px;
                    background-color: #000000;
                    color: #ffffff;
                    list-style: none;
                    width: 125px;
                    border-radius: 5px;
                    padding: 0;

                   li{
                     span{
                         width: 44px;
                       padding: 10px;
                         margin: 0 5px;
                     }
                       a{
                            color: #ffffff;
                       }
                   }
                }


            }
        }
        .container{
            display: inline-block;
          height: 900px;
            width: 80px;
            background-color: #eeeeee;
            float: left;
            .mui-fullscreen {
                position: absolute;
                top: 44px;
                right: 0;
                bottom: 0;
                left: 0;

            .mui-segmented-control.mui-segmented-control-inverted{
                height: 100%;
                    .mui-scroll {
                        height: 100%;
                      display: flex;
                        flex-direction: column;


                    }
                }
            }
        }
        .container-b{
            width: 325px;
            display: inline-block;
            height: 900px;
            float: right;
            padding: 10px 10px;
            background-color: #fff;
            img{
                width: 100%;
            }
            .lishi{
                margin-top: 10px;
               span{
                   font-size: 17px;
               }
                h3{
                    font-size: 14px ;
                    display: inline-block;
                }
                ul {
                 list-style: none;
                    padding: 7px 10px 0;
                    li {
                        width: 70px;
                        height: 70px;
                        text-align: center;
                        img {
                            width: 70px;
                            height: 70px;
                        }
                    }
                }
            }
            .hotshopping{
                margin-top: 20px;
                padding: 20px 0;
                h3{
                    font-size: 14px;
                }
                img{
                    width: 80px;
                    height: 80px;
                }
                ul{
                    list-style: none;
                    padding: 0 ;
                    display: flex;
                    flex-wrap: wrap;
                    li{
                        width: 100px;
                        text-align: center;
                        padding: 10px;
                        a{
                            color: #000000;
                        }

                    }
                }
            }
        }
    }
</style>